<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		
	</head>
	<body>
		<img src="img/this.jpg" />
		<div >
		<input id="search" type="text"  value="请输入搜索" /><span>搜索</span>
		</div>
	</body>
	<style type="text/css">
			
			div{ width: 800px;padding: 0;margin: 0;}
			input{
				position: absolute;.
				top:100px;left: 340px;
				height: 30px;width: 500px;
				border: 3px solid  #ff6604;z-index: 500;
			}
			span{z-index: 100;
				position: absolute;
				top: 100px;left: 845px;
				background-color:#ff6604 ;
				padding-top: 10px;
				line-height: 30px;width: 100px;
				padding-left: 50px;
				color: white;
			}
			img{z-index: 1;}
			.test{
				position: fixed;top: 20px;
			}
		</style>
	<script type="text/javascript">
		
		$(document).ready(function(){
			$(document).scroll(function(){
            if($(window).scrollTop() > 100){
            $("input,span").addClass("test");
            
            }else{
            	 $("input,span").removeClass("test");
            }
            
            
			});
			
			
		})
         	
	</script>
</html>
